<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['技术管理', '生产流程']" currentMenu="生产流程详情"> </crumbs>
    <div class="uni-card" id="navbar" style="overflow: hidden">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="detail-item">
          <p class="subtitle">流程编号</p>
          <p class="secondary-text">{{ detailInfo.flowCode || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">流程名称</p>
          <p class="secondary-text">{{ detailInfo.flowName || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">状态</p>
          <p class="secondary-text" :class="detailInfo.status == 'enable' ? 'passFont' : ''">{{ detailInfo.status == 'enable' ? '启用' : '禁用' }}</p>
        </div>
      </div>
    </div>
    <div class="cards-box">
      <a-card title="流程工序" :bordered="false" style="margin-top: 12px">
        <a-table
          row-key="id"
          :columns="columns"
          :data-source="detailInfo.flowProcessRelVoList"
          :pagination="false"
          :scroll="{ x: '100%', y: 600 }"
        >
        </a-table>
      </a-card>
      <a-card title="应用物料分类" :bordered="false" style="margin-top: 12px">
        <div class="item-wrap">
          <div class="detail-item" style="width:100%">
            <p class="subtitle">物料分类</p>
            <p class="secondary-text">{{ detailInfo.goodsCategoryNum || '-' }}</p>
          </div>
        </div>
      </a-card>
      <a-card title="其他信息" :bordered="false" style="margin-top: 12px">
        <div class="item-wrap">
          <div class="detail-item" style="width:100%">
            <p class="subtitle">备注</p>
            <p class="secondary-text">{{ detailInfo.remark || '-' }}</p>
          </div>
        </div>
        <div class="item-wrap" style="margin-top:40px">
          <div style="width: 100%">
            <p class="subtitle">附件</p>
            <file-detail :ids="detailInfo.attachment"></file-detail>
          </div>
        </div>
      </a-card>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { messProductFlowQueryById } from '@/api/goodsManagement'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      jkeForm: {
        title: '生产流程详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      current: 1,
      total: 0,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],

      detailInfo: {},
    }
  },
  components: {
    crumbs,
    FileDetail,
  },
  computed: {
    columns() {
      // let { typeFilter } = this
      // typeFilter = typeFilter || {}
      let { sortedInfo, filteredInfo } = this
      sortedInfo = sortedInfo || {}
      filteredInfo = filteredInfo || {}
      const columns = [
        {
          title: '序号',
          width: '8%',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '工序',
          dataIndex: 'processName',
          key: 'processName',
          ellipsis: true,
        },
        {
          title: '报工单位',
          dataIndex: 'processWorkUnitText',
          key: 'processWorkUnitText',
          ellipsis: true,
        },
        {
          title: '报工配比',
          dataIndex: 'processWorkRate',
          key: 'processWorkRate',
          ellipsis: true,
        },
        {
          title: '超量报工（%）',
          dataIndex: 'excessWorkRate',
          key: 'excessWorkRate',
          ellipsis: true,
        },
        {
          title: '工序要求',
          dataIndex: 'processRequire',
          key: 'processRequire',
          ellipsis: true,
        },
      ]
      return columns
    },
  },
  methods: {
    /* 面包屑返回 */
    goBack() {
      this.$router.replace('/skillManagement/productionProcess')
    },
    initDetail(id) {
      this.jkeForm.visible = true
      messProductFlowQueryById({ id: id }).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result || {}
        }
      })
    },
    // 分页
    onChangePage(current, pageSize) {
      // this.getList(current)
      this.current = current
    },
    onShowSizeChange(current, pageSize) {
      // this.getList(current, pageSize)
      this.pageSize = pageSize
      this.current = current
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px 0 24px -40px;
}
.cards-box {
  height: calc(100vh - 219px);
  overflow-y: scroll;
}
.pagination {
  .flex(flex-end, center);
  padding: 8px;
}
.passFont {
  color: @passFont
}
</style>
